<template>
  <div class="layout-padding">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="first">
        <template #label>
          <el-icon>
            <calendar/>
          </el-icon>
          <span class="ml-0.5"> {{ $t('equipment.eqpRun') }} </span>
        </template>
      </el-tab-pane>
      <el-tab-pane name="sercond">
        <template #label>
          <el-icon>
            <Box/>
          </el-icon>
          <span class="ml-0.5"> {{ $t('equipment.eqpStop') }} </span>
        </template>
      </el-tab-pane>
      <el-tab-pane name="third">
        <template #label>
          <el-icon>
            <Box/>
          </el-icon>
          <span class="ml-0.5"> {{ $t('equipment.eqpFault') }} </span>
        </template>
      </el-tab-pane>
    </el-tabs>
    <eqpRun ref="locationRef" v-if="activeName === 'first'"/>
    <eqpStop ref="locationRef" v-if="activeName === 'sercond'"/>
    <eqpFault ref="locationRef" v-if="activeName === 'third'"/>
  </div>
</template>

<script setup lang="ts">
import type {TabsPaneContext} from 'element-plus';
import {useI18n} from 'vue-i18n';

const {t} = useI18n();

// 引入组件
const eqpRun = defineAsyncComponent(() => import('./eqpRun.vue'));
const eqpStop = defineAsyncComponent(() => import('./eqpStop.vue'));
const eqpFault = defineAsyncComponent(() => import('./eqpFault.vue'));
// 搜索变量
const queryRef = ref;
const locationRef = ref();
const activeName = ref('first');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  activeName.value = tab.props.name;
};
</script>
